<template>
  <div>
    <el-row class="el-row">

      <el-col :span="14" style="margin:10px;padding:20px">
        <el-card class="el-card">
          <div slot="header" class="clearfix">
            <span>个人信息</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="changeUserInfo">修改</el-button>
          </div>
          <div class="text item">
            <el-form ref="form" :model="form" label-width="80px">
              <el-form-item label="姓名">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input v-model="form.email"></el-input>
              </el-form-item>
              <el-form-item label="手机号">
                <el-input v-model="form.phone"></el-input>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6" style="margin:10px;padding:20px;">
        <el-card
          class="el-card"
          style="text-align: center;">
          <el-avatar :size="180" :src="HeadImg"></el-avatar>
          <el-button style="margin: 10px;color: red" @click="LogOut">退出登录</el-button>
        </el-card>
      </el-col>

    </el-row>
  </div>
</template>

<script>
import axios from "axios";
import {post,get} from "../common/serviceUtil";

export default {
  data() {
    return {
      HeadImg: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
      form: {
        name: '',
        email: '',
        phone: '',
      },
    }
  },
  //钩子函数mounted 在加载页面时触发get函数getUserInfo()
  mounted:function(){
    this.getUserInfo();
  },
  methods: {
    //修改个人信息
    changeUserInfo() {
      // console.log('submit!');
      // console.log(this.form.name);
      var that = this;
      post("/changUserInfo",this.form)
        .then(function (response) {
          if(response.data.status===1) {
            console.log(response);

            that.$message({
              showClose: true,
              message: '修改成功',
              type: 'success'
            });
          }else if (response.data.status===0){
            alert("哒咩")
          }
        })
        .catch(function (err) {
          // console.log(1);
          that.$message({
            showClose: true,
            message: '修改失败',
            type: 'error'
          });
        })
    },

    //退出登录
    LogOut() {
      this.$confirm('此操作将退出您的账号, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        this.$router.push({path:'/'})
        this.$message({
          type: 'success',
          message: '退出成功!',

        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },

    //获取个人信息
    getUserInfo(){
      var that = this;
      get("/getUserInfo")
        .then(function(response){
          if(response.data.status===1) {
            that.form.name = response.data.data.name
            that.form.email = response.data.data.email
            that.form.phone = response.data.data.phone
          }
        });
    },
  }
};
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap
}

.el-card {
  min-width: 100%;
  height: 100%;
  padding: 20px;
}
</style>
